<template>
  <div style="width:100%;height:100%;">
    <!-- <HelloWorld msg="Welcome You Vue.js App" /> -->
    <el-container>
      <el-aside width="159px">
        <div class="head-box flex-align">
          <div><img :src="userInfo.userHead" alt=""></div>
          <div>{{ userInfo.userName }}</div>
        </div>
        <el-menu 
          :default-active="activePath"
          active-color="#00CCCC"
          active-text-color="#fff" 
          text-color="#fff" 
          background-color="#333333" 
          
        >
          <el-menu-item 
            v-for="menu in menuList" 
            :key="menu.id" 
            :index="menu.menuPath"
            @click="saveNavSlale(menu.menuPath,1)"
          >
            <img :src="require('@/assets/' + menu.iconName)">
            <span slot="title">{{menu.menuName}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <HeaderNav @handleChange="saveNavSlale" :childMenuList="childMenulist"></HeaderNav>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import HeaderNav from '@/components/HeaderNav.vue'
import API from '@/api'

export default {
  name: 'HomeView',
  components: {
    HeaderNav
  },
  data() {
    return {
      userInfo: {
        userName: '杨俊宏',
        userHead: require('@/assets/imgs/head.jpg')
      },
      // 菜单列表
      menuList: [],
      activePath: '',
      childMenulist: []
    }
  },
  created() {
    this.activePath = '/' + this.$route.path.split('/')[1]
    this.getMenuList()
  },
  methods: {
    //保存链接的激活状态
    saveNavSlale(activePath,isParent){
      if (isParent == 1) {
        this.$router.push(activePath)
        window.sessionStorage.setItem('activePath',activePath)
        this.childMenulist = this.menuList.find(x => x.menuPath == activePath).childMenulist
      } else {
        this.$router.push(activePath)
      }
    },
    // 获取菜单列表
    getMenuList() {
      // var params = {
      //   userName: "admin",
      //   passward: "123"
      // }
      API.common.getMenuList().then(({data}) => {
        if (data && data.code === 200) {
          this.menuList = data.data
          this.childMenulist = this.menuList.find(x => x.menuPath == this.activePath).childMenulist
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-container {
  width: 100%;
  height: 100%;
  background-color: #F2F2F2;
  .el-main,
  .el-header {
    height: fit-content !important;
    margin: 0;
    padding: 0;
  }
}
.el-aside {
  width: 159px;
  height: 100%;
  background-color: #333333;
  overflow: -moz-hidden-unscrollable;
}
.head-box {
  padding-top: 36px;
  width: 100%;
  height: 203px;
  :nth-child(1) {
    width: 57px;
    height: 57px;
    border-radius: 50%;
  }
  :nth-child(2) {
    margin-top: 18px;
    font-size: 16px;
    color: #FFFFFF;
  }
}
.el-menu {
  border: none !important;
  .el-menu-item {
    height: 58px;
    img {
        height: 16px;
        margin-right: 22px;
    }
  }
  .el-menu-item.is-active {
    background-color: #00CCCC !important;
  }
  .el-menu-item:hover {
    background: #489e9e !important;
  }
}

</style>